<template>
  <div class="login-container">
    <el-alert
        style="width: 450px;position: relative; bottom: 65px"
        title="第一次登录可直接注册！"
        type="info"
        show-icon
        :closable="false"
        center>
    </el-alert>
    <el-card class="dialog">
      <el-row type="flex" justify="left">
        <el-page-header @back="goBack" content="登录"></el-page-header>
      </el-row>
      <el-row class="content" type="flex" justify="center" :gutter="24">
        <el-col style="margin: 70px auto">
          <el-image :src="require('@/assets/images/reg_bg.png')" fit="fill"></el-image>
        </el-col>
        <el-col class="login-form">
          <el-card class="form" shadow="hover">
            <el-row type="flex" justify="center" style="font-size: 25px">登录</el-row>
            <el-form style="margin-top: 30px" :model="user" ref="form" :rules="rules" label-width="70px">
              <el-form-item label="账号" prop="username">
                <el-input v-model="user.username" placeholder="请输入账号"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password" style="margin-top: 30px">
                <el-input v-model="user.password" type="password" show-password clearable placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item label="验证码" prop="code" style="margin-top: 30px;height: 60px">
                <el-row type="flex" justify="space-between">
                  <el-input v-model="user.code" style="width: 120px" placeholder="验证码"></el-input>
                  <el-tooltip class="item" effect="dark" content="点击图片即可刷新验证码" placement="top">
                    <el-image @click="refreshCode" :src="url" alt="点我刷新验证码"></el-image>
                  </el-tooltip>
                </el-row>
              </el-form-item>
            </el-form>
            <el-row type="flex" justify="center">
              <el-button class="sub" :disabled="disabled" @click="submit">提交</el-button>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>

export default {
  name: 'Login',
  data() {
    return {
      disabled: false,
      url: '/api/kaptcha',
      user: {
        username: "",
        password: "",
        code: ""
      },
      rules: {
        username: [
          {required: true, message: '账号不能为空', trigger: ['blur', 'change']},
        ],
        password: [
          {required: true, message: '密码不能为空', trigger: ['blur', 'change']},
        ],
        code: [
          {required: true, message: '验证码不能为空', trigger: ['blur', 'change']},
        ]
      }
    }
  },
  watch: {},
  methods: {
    refreshCode() {
      this.url = this.url + "?d=" + Math.random()
    },
    goBack() {
      this.$router.go(-1)
    },
    submit() {
      let that = this
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.disabled = true
          this.$store.dispatch("app/login", this.user)
              .then((resp) => {
                if (resp) {
                  this.$message.success("用户登录成功！")
                  this.goBack()
                }
              })
              .catch((error) => {
                this.$message.error(error)
                this.refreshCode()
              }).finally(() => {
                this.disabled = false
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.login-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  background-image: linear-gradient(to top right, #4954c6, #28b8b8);
}

.dialog {
  width: 60%;
  height: 70%;
  background-color: white;
  border-radius: 30px;
  min-width: 1000px;
  min-height: 620px;
}

.content {
  margin: 50px auto;
  height: 430px;
}

.login-form {
  display: flex;
  align-items: center;
  justify-content: center;
}

.form {
  height: 90%;
  width: 80%;
}

.sub {
  width: 170px;
  background-color: #dbecef;
  color: #28b8b8;
  border: none;
}

.sub:hover {
  color: white;
  background-color: #28b8b8;
}

.sub:focus {
  color: white;
  background-color: #28b8b8;
}

</style>
